<template>
  <div class="addFormula">
    <el-dialog
      title="添加公式"
      width="40%"
      :visible="addDialog"
      :before-close="close"
    >
      <el-form :model="form" label-position="top" size="mini">
        <el-form-item label="公式名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.name"
            autocomplete="off"
            placeholder="1-50个字符"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form
       size="mini"
        label-position="top"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="结果设置">
          <el-select v-model="value">
            <el-option label="四舍五入" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="保留小数位数后">
          <el-select v-model="value">
            <el-option label="5" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          位
        </el-form-item>
        <el-form-item
          label="公式条件设置（请拖拽到计算公式中，拖出区域删除）"
          :label-width="formLabelWidth"
        >
          <el-button size="mini" type="success">字段</el-button>
          <el-button size="mini" type="primary">数值</el-button>
          <el-button size="mini" type="warning">（</el-button>
          <el-button size="mini" type="warning">）</el-button>
          <el-button size="mini" type="warning">+</el-button>
          <el-button size="mini" type="warning">-</el-button>
          <el-button size="mini" type="warning">*</el-button>
          <el-button size="mini" type="warning">/</el-button>
          <!-- <el-button size="mini" type="warning">MIN</el-button>
          <el-button size="mini" type="warning">MAX</el-button>
          <el-button size="mini" type="warning">AVERAGE</el-button>
          <el-button size="mini" type="warning">DAY</el-button>
          <el-button size="mini" type="warning">MONTH</el-button> -->
        </el-form-item>
      </el-form >
      <div  style="border:1px solid #ccc;padding:10px" >
      <el-form size="mini" :model="form" label-position="top">
        <el-form-item label="公式" :label-width="formLabelWidth">
          <div style="border:1px solid #ccc;padding:10px">
            <el-button size="mini" type="success">字段</el-button>
            <el-button size="mini" type="warning">*</el-button>
            <el-button size="mini" type="primary">数值</el-button>
          </div>
        </el-form-item>
        <el-form-item label="条件" :label-width="formLabelWidth">
          <el-select v-model="value">
            <el-option label="默认方案" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select v-model="value">
            <el-option label="校龄津贴" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
          <el-select v-model="value">
            <el-option label="校龄津贴" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">添加条件</el-button>
        <el-button type="danger">删除条件</el-button>
      </el-form>
      </div>
        <el-button style="margin-top:5px" type="primary">添加公式</el-button>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ContractEdit",
  components: {},
  props: {
    addDialog: { type: Boolean },
  },
  dicts: ["contract_type"],
  data() {
    return {
      value: "四舍五入",
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    submit() {
      this.close();
    },
    close() {
      this.$emit("close", false);
    },
  },
};
</script>

<style lang="less" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-select{
    margin-right: 10px;
}
</style>

